<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
<div id="app">
    <table>

        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>资金</th>
        </tr>
        <tr v-for="u in userlist">

            <td>{{u.id}}</td>
            <td>{{u.name}}</td>
            <td>{{u.money}}</td>
            <td>
                <button type="button">详情</button>
                <button type="button" @click="findById(u.id)">修改</button>
                <button type="button" @click="deleteById(u.id)">删除</button>
            </td>
        </tr>
        <tr v-for="(value,key)">
            <td>{{value}}</td>
        </tr>

    </table>

    <div class="tab-pane" id="tab-model">

        <div id="myModal" class="modal modal-primary" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        </button>
                        <h4 class="modal-title">用户信息</h4>
                    </div>
                    <div class="modal-body">

                        <div class="box-body">
                            <div class="form-horizontal">

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">用户名:</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" v-model="user.name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">资金:</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" v-model="user.money">
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-outline" data-dismiss="modal" @click="update">修改</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>

            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
    </div>

    <hr/>
    姓名 <input type="text" name="name" v-model="iname">
    资金 <input type="text" name="money" v-model="imoney">

    <button type="button" @click="addUser" >添加</button>
    <hr/>

    <input type="text" placeholder="输入你想搜索的用户" v-model="username">
    <button type="button" @click="findByName" >添加</button>


</div>

<script src="js/axios-0.18.0.js"></script>
<script src="js/vuejs-2.5.16.js"></script>
<script src="js/user.js"></script>
</body>
</html>